<template>
  <div>
    <h1>摄像头监控</h1>
    <video ref="video" autoplay muted playsinline style="width: 100%; height: 400px; background: #000;"></video>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initializeCamera();
  },
  methods: {
    async initializeCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.video.srcObject = stream;
      } catch (error) {
        console.error('无法获取摄像头流:', error);
      }
    },
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-bottom: 20px;
}
video {
  display: block;
  margin: 0 auto;
}
</style>
